import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { DrawerForm, ProFormText,  ProFormSelect } from '@ant-design/pro-form';
import React, { useState, useRef } from 'react';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import { teamList,saveTeam,updateTeam,deleteTeam,lineList,deptList,getDetailsByTeamId ,authTeam} from '../service';
import { Popconfirm,Button,message, Form, Select } from 'antd';
import { manufacturerOptionOnly } from '@/utils/utils';
const { Option } = Select;
export default () => {
const [showCreate, setShowCreate] = useState(false);
const actionRef = useRef<ActionType>();
const [detail, setDetail] = useState<any>({});
const [showImport, setShowImport] = useState<boolean>(false);
const [showAuth,setShowAuth] = useState<boolean>(false);
const [productLines, setProductLines] = useState<any>([]);
const [productLine,setProductLine] = useState<any>({});
const [pData,setPdata] = useState<any>([]);
const [provinces,setProvinces] = useState<any>([{label:'江苏省',value:'1'},{label:'山东省',value:'2'},{label:'上海市',value:'3'},{label:'安徽省',value:'4'},{label:'广东省',value:'5'}]);
const pColumns :ProColumns[] = [
  {
    title: '产品名称',
    width:140,
    ellipsis:true,
    dataIndex: 'label',
  },
  {
    title: '厂家简称',
    width:80,
    ellipsis:true,
    dataIndex: 'manufacturer',
    renderText: e => {
      return manufacturerOptionOnly()[Number(e)].text;
    }
  },
  {
    title: '报量层级',
    width:80,
    ellipsis:true,
    dataIndex: 'volumeLevel',
    renderText:(level)=>{
      if(level==='2'){
        return '医院'
      }
      return '科室'
    }
  },
  {
    title: '科室',
    dataIndex: 'name',
    width:300,
    render: (text, record:any,_, action) => {
      if(record.volumeLevel==='2'){
        return <></>
      }
      return <Select  mode="multiple" placeholder="请选择科室" defaultValue={record.depts}
      style={{ width: '100%' }}
      onChange={(value)=>{
        record.depts = value
      }}
      allowClear>
         {depts.map((item:any)=>{
           return <Option value={item.value} key={item.value}>{item.label}</Option>
         })}
      </Select>
    }
  },
  {
    title: '操作',
    valueType: 'option',
    width: 100,
    fixed: 'right',
    render: (text, record:any, _, action) => [
       <Popconfirm title='确定要删除该产品吗?' key='delete' onConfirm={() => {
          setPdata(pData.filter((item:any)=>item.value!=record.value))
       }
      }><a>删除</a></Popconfirm>
    ]}
   ]

  //  const onFileUpload=(info:any)=>{
  //   if (info.file.status !== 'uploading') {
  //   }
  //   if (info.file.status === 'done') {
  //     if(info.file.response.errorCode==='200'){
  //       message.success(`${info.file.name} 上传成功，后台正在处理...`);
  //       actionRef.current?.reloadAndRest?.();
  //       setShowImport(false);
  //     }else{
  //       message.error('上传失败: '+info.file.response.msg);
      
  //     }
  //   } else if (info.file.status === 'error') {
  //     message.error(`${info.file.name} 上传失败！`);
  //   }
  // }


const columns: ProColumns[] = [
  {
    title: '大区',
    dataIndex: 'area',
    width:120,
  },
  {
    title: '省份',
    hideInSearch:true,
    ellipsis:true,
    dataIndex: 'provinces',
  },


  {
    title: '操作',
    valueType: 'option',
    width: 120,
    fixed: 'right',
    render: (text, record:any, _, action) => [
      <a key='detail' onClick={async () => {
       
       }}>修改</a>,
       <Popconfirm title='确定要删除吗?' key='delete' onConfirm={() => handleDelete(record.id)}><a>删除</a></Popconfirm>
    ]}
   ]
   const handleDelete = async(id:string) => {
    //     var val = await deleteTeam({
    //       id: id,
    //     });

    //    if (val.errorCode === '200') {
    //        message.success('删除成功')
    //        actionRef.current?.reloadAndRest?.()
    //    } else {
    //       message.error(val.errorMessage)
    //    }
   };


return (<PageContainer>
    <ProTable actionRef={actionRef} headerTitle='列表' pagination={{pageSizeOptions: ['20', '100', '500']}}
       dataSource={[{area:'华东',provinces:'江苏省、上海市',lines:'xxxx'},{area:'南区',provinces:'广东省,云南省',lines:'xxxxx'}]} columns={columns} rowKey='id' toolbar={{settings: []}}
       search={{labelWidth: 120}} toolBarRender={() => [<Button type='primary' key='primary' onClick={async() => {
        //  setShowCreate(true)
         setDetail(undefined)
         setPdata([])
          var val = await lineList({})
         setProductLines(val.data.map((item:any)=>{
           return {label:item.name,value:item.id}
         }))
         setShowAuth(true)
        }}>新增</Button>]}
   />
    <DrawerForm title={detail ? '编辑' : '新增'} onVisibleChange={setShowAuth} visible={showAuth} drawerProps={{forceRender: true,destroyOnClose: true}} 
  onFinish={async (values: any) => {

    return true
  }}>

    <ProFormText name='name' label='大区'  placeholder='请输入大区名称' width='md' initialValue={detail?.name} rules={[{required: true}]} />
    <ProFormSelect name="provinces" label="省份" mode='multiple' options={provinces}/>
	</DrawerForm>
    
   </PageContainer>
)}
